<template>
  <div class="header-filter">
    <div class="form">
      <div class="form-item">
        <div class="form-label">台区名称</div>
        <div class="form-wrapper">
          <vxe-input v-model="form.name" placeholder="请输入名称"></vxe-input>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">起始时间</div>
        <div class="form-wrapper">
          <!-- <input type="date" /> -->
          <el-date-picker
            v-model="form.startDate"
            type="date"
            placeholder="请选择"
          ></el-date-picker>
        </div>
      </div>

      <vxe-button content="查询" status="primary" @click="search"></vxe-button>
      <i class="vxe-icon-caret-down"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
interface FormState {
  name: string;
  startDate: string;
}
const form = ref<FormState>({ name: '', startDate: '' });
const emit = defineEmits(['search']);

const search = () => {
  emit('search', form.value);
};
</script>

<style lang="less" scoped>
.header-filter {
  display: flex;
  margin-bottom: 12px;
  .form {
    display: flex;
    align-items: center;
    .form-item {
      display: flex;
      align-items: center;
      margin-right: 32px;
      .form-label {
        margin-right: 16px;
      }
    }
  }
}
.vxe-icon-caret-down {
  margin-left: 16px;
  &::before {
    color: var(--vxe-primary-color);
  }
}
</style>
